<template>
    <view style="background: #f3f4f9;">
        
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <view class="kaoshi-head">
        	<view class="kaoshi-head-top">
        		<view class="kaoshi-head-left"></view>
        		<view class="kaoshi-head-m">我的</view>
        	</view>
        </view>
        <view class="kaoshi-user">
           <!-- <view class="kaoshi-user-l" @tap="$openrul('/pages/auth/choiceSubject/index')">
                切换
                <view class="iconfont icon-weibiaoti"></view>
            </view>
            <view class="kaoshi-user-m">我的</view> -->
			<view v-if="$myConfig.mode != 3" class="kaoshi-user-right"></view>
			<!-- 微信授权和小程序授权不需要设置个人信息 -->
			<view v-if="$myConfig.mode == 3" class="kaoshi-user-right">
                <view class="iconfont icon-shezhi1" @tap="navTo('/pagesa/my/setting/index')"></view>
            </view>
        </view>
		<view style="margin: auto;z-index: 10;position: fixed;top: 150px;left: 290px;width: 150rpx; ">
			<navigator 
			url="/pagesa/my/userInfo/userInfo" 
			style="display: flex;align-items: center;justify-content: space-around;" >
				<text style="font-size: 25rpx;color: #313131;">个人主页</text>
				<image src="../../static/img/in.png" style="height: 40rpx;width: 40rpx;"></image>
			</navigator>
		</view>
		<view class="phone">
			{{phone}}
		</view>
		<view v-if="$myConfig.mode == 3" class="kaoshi-user-top">
		            <view class="kaoshi-user-top-content">
		                <image class="kaoshi-user-top-content-image" :src="userinfo.user_id  ? user_info.avatar : static_media.kong"></image>
		                <view class="kaoshi-user-top-title">
		                    <view v-if='userinfo.user_id == undefined' @tap="$openrul('/pagesa/auth/login/index')" style="margin-top: 24rpx;">请登录</view>
		                    <view v-else style="margin-top: 24rpx;">
		                        {{userinfo.nickname}}
		                    </view>
							<view >
								<image src="../../static/img/novip.png"  v-if="ismember==0" style="width:40rpx;height:28rpx"></image>
								<image src="../../static/img/yesvip.png"  v-else style="width:40rpx;height:28rpx"></image>
							</view>
							<view v-if="ismember==1" style="font-size: 24rpx;margin-top: 6rpx;color:#ffbb31">
								到期时间：{{member_endtime}}
							</view>
							
		                </view>
						
		            </view>
					
		</view>
		
       <view v-else class="kaoshi-user-top">
            <view class="kaoshi-user-top-content">
                <image class="kaoshi-user-top-content-image" :src="userinfo.user_id  ? userinfo.avatarUrl : static_media.kong"
                      ></image>
                <view class="kaoshi-user-top-title">
                    <view v-if="userinfo.user_id == undefined" @tap="$openrul('/pagesa/auth/login/index')" style="margin-top: 24rpx;">
                        请登录
                    </view>
					<view class="user-name" v-else >
						<text>{{userinfo.nickName}}</text>
						<view v-if="userinfo.nickName.length<7" style="width: 80rpx;">
							<image src="../../static/img/yesvip.png" mode="" v-if="ismember==1"></image>
							<image src="../../static/img/novip.png" mode="" v-else ></image>
						</view>
					</view>
					<view class="dw-vip-img" v-else-if="userinfo.nickName.length>7">
						<image src="../../static/img/yesvip.png" mode="" v-if="ismember==1" ></image>
						<image src="../../static/img/novip.png" mode="" v-else ></image>
					</view>
					<view v-if="ismember==1" style="font-size: 24rpx;margin-top: 6rpx;color:#ffbb31">
						到期时间：{{member_endtime}}
					</view>
                </view>
            </view>
        </view>
		<view class="vip-img" >
			<view   @tap="goVip()">
				<image src="http://shuati26.kptedu.com/uploads/image/vipimg.png"></image>
			</view>
		</view>
		<uni-list style="position: relative;top: 220px;" >
			<view @tap="coupon()" hover-class="none">
				<uni-list-item title="优惠券" :thumb="static_media.xunzhang"></uni-list-item>
			</view>
			<view  hover-class="none">
				<uni-list-item title="系统通知" :thumb="static_media.xunzhang"></uni-list-item>
			</view>
			<view @tap="kong()" hover-class="none">
				<uni-list-item title="我的勋章" :thumb="static_media.xunzhang"></uni-list-item>
			</view>
			<view @tap="kong()" hover-class="none">
				<uni-list-item title="报考数据" :thumb="static_media.baokao"></uni-list-item>
			</view>
			<view @tap="getCode()"   hover-class="none">
				<uni-list-item title="激活通道" :thumb="static_media.cdkey"></uni-list-item>
			</view>
			<view   hover-class="none">
				<uni-list-item title="考试提醒" :thumb="static_media.tixing"></uni-list-item>
			</view>
			<view  hover-class="none" @tap="getAbout()" >
				<uni-list-item title="关于我们" :thumb="static_media.about"></uni-list-item>
			</view>
			<view @tap="getFeedback()" hover-class="none">
				<uni-list-item title="我要反馈" :thumb="static_media.feedback"></uni-list-item>
			</view>
			<view @tap="question()"  hover-class="none">
				<uni-list-item title="常见问题" :thumb="static_media.wenti"></uni-list-item>
			</view>
		</uni-list> 
		
		<view @tap="goLogout" style="background:#fff;margin:0 auto;margin-top:10px;height:60px;line-height:60px;text-align:center;border-radius:10px">
			退出登录
		</view>
		
		
		<!-- <view class="tan" v-if="showModal">
			<view class="tan-mask" @tap="isShowModal"></view>
			<view class="tan-modal">
				<view class="tan-title">
					<view>激活码</view>
				</view>
				<view class="tan-content">
					 <view class="">
					 	<input  @input="onInput" style="padding:16rpx;margin-top:20rpx;border:1px solid #eee;text-align:left" type="text" value="" placeholder="请输入激活码" />
					 </view>
					<view class="exam-tan-button"
						  @tap="submitCode()">确定
					</view>
				</view>
			</view>
		</view> -->
    </view>
	
</template>

<script>
    import {mapState} from 'vuex'
    import uniList from '@/components/uni-list/uni-list.vue'
    import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
    import Error from '@/core/untils/error/index';

    export default {
        data() {
            return {
				user_info:{},
				showModal:!1,
				setCode:'',
				ismember:1,
				member_endtime:"",
				
				phone:'',
            }
        },
		onLoad(){
			if(this.phone==''){
				this.phone=uni.getStorageSync('phone')
			}
			
		},
        mounted() {
        },
        computed: {
            ...mapState(['subject', 'userinfo']),
            static_media() {
                return { 
					xunzhang:'/static/img/xunzhang.png',
					baokao:'/static/img/baokao.png',
					wenti:'/static/img/wenti.png',
					cdkey: '/static/img/cdkey.png',
					feedback: '/static/img/feedback.png',
					about: '/static/img/about.png',
					tixing: '/static/img/tixing.png',
                    kong: this.$myConfig.localMedia + '/static/img/txk.png',
                    useravatar: this.$myConfig.interMedia + this.userinfo.avatar,
					
                }
            }
        },
        components: {
            uniList,
            uniListItem,
        },
        onShow() {
			
			if (this.$myConfig.mode == 3 && this.userinfo.token) {
			    this.getUserInfo();
			} 
			
			this.getinfo()
        },
		
        methods: { 
			isShowModal: function () {
				this.showModal = !this.showModal
			},
		   async goLogout() {
			   var that=this
			   uni.showModal({
			       title: '提示',
			       content: '确定退出吗',
			       success: function (res) {
			           if (res.confirm) {
			              uni.clearStorage();
						  that.$store.commit('setUserInfo', {userinfo: {}})
			              that.$myUtils.$router.reLaunch({
			                  url: "/pages/index/index"
			              });
			           } else if (res.cancel) {
			               console.log('用户点击取消');
			           }
			       }
			   });
			   
			 
		   },
		  getCode() {
		    if(this.$myUserLogin.getToken()){ 
		  				
		  				 uni.navigateTo({
		  				 	url:'/pagesa/my/activation/activation'
		  				 })
		    }else{
		      Error.errorNotLoggedIn();
		    }
		  },
		   getAbout() {
		     if(this.$myUserLogin.getToken()){ 
				 this.$openrul('/pagesa/my/about/index')
		     }else{
		       Error.errorNotLoggedIn();
		     }
		   },
		   getFeedback() {
		     if(this.$myUserLogin.getToken()){ 
				 this.$openrul('/pagesa/my/feedback/index')
		     }else{
		       Error.errorNotLoggedIn();
		     }
		   },
		   goVip() {
		     if(this.$myUserLogin.getToken()){ 
				  this.$openrul('/pagesa/my/vip/index')
		     }else{
		       Error.errorNotLoggedIn();
		     }
		   },
		
	 
		  async getinfo() {
		      let res = await this.$myHttp.post({
		          url: this.$myHttp.urlMap.userInfo,
		          needLogin: true
		      })
		      if (res.code == 1) {
		  		
		        this.ismember = res.msg.ismember
				this.member_endtime = res.msg.member_endtime
		      }
		  },
			async getUserInfo() {
			    let res = await this.$myHttp.post({
			        url: this.$myHttp.urlMap.userInfo,
			        needLogin: true
			    })
			    if (res.code == 1) {
					
			        this.user_info = res.msg
			    }
			},
            //跳转前需要登录
            navTo(url) {
                if (this.$myUserLogin.getToken()) {
                    this.$openrul(url)
                } else {
                    Error.errorNotLoggedIn();
                }
            },
			//授权完毕后继续调用之前的方法
			nextOrder(data){
				
			},
			ifShow(data){
			    this.Shouquan=data
			},
			/*新增数据   点击提示为空*/
			kong(){
				uni.showToast({
				   title: '功能正在维护请耐心等待',
				   icon: 'none'
				  })
			},
			question(){
				
				uni.navigateTo({
					url:'/pagesa/my/commonProblem/commonProblem'
				})
			},
			coupon(){
				uni.navigateTo({
					url:'/pagesa/my/coupon/coupon'
				})
			},
			systemClass(){
				uni.navigateTo({
					url:'/pagesa/my/systemCalss/systemCalss'
				})
			},
			
			
        }
    }
</script>

<style>
	/*控制用户名的长度*/
	.usename{
		width:200px;
		white-space:nowrap;
		word-break:keep-all;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	
	.uni-list-cell__content-titl{
		font-size:28rpx !important;
	}
	/*弹窗*/
	.tan-mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}
	
	.tan-modal {
		position: fixed;
		z-index: 999;
		width: 80%;
		max-width: 300px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
	}
	
	.tan-title {
		padding: 15px 0;
		/* border-bottom: solid 1px #f4f4f4; */
	}
	
	.tan-title view {
		font-weight: 400;
		font-size: 17px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.tan-content {
		width: 90%;
		margin: 0 auto;
		font-size: 14px;
	}
	.exam-tan-button {
		background: #3c7bfc;
		color: #fff;
		padding: 10px;
		margin: 15px 0;
		border-radius: 4px;
		font-size: 16px;
		display: block !important;
	}
	.uni-list-cell__icon-img {
	  height: 40rpx !important;
	  width: 40rpx !important;
	}
	.uni-list-cell__content{
		overflow: initial !important;
	}
	.uni-list{
		/* width:92% !important; */
		margin:0 auto !important;
		margin-top:10px !important;
		border-radius: 10px !important;
	}
	.uni-list-cell__icon-img {
	  height: 52rpx;
	  width: 52rpx;
	}
    

    page {
        background: #f3f4f9;
    }

    .kaoshi-user {
        color: #333;
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        background: #f6f6f6;
        padding: 0 16px;
		margin-top: 125rpx;
    }

    .kaoshi-user-top {
        
		width: 92%;
		    margin: 0 auto;
		    border-radius: 10px;
		    margin-top: 30px;
		    position: fixed;
		    top: 90px;
		    z-index: 99;
    }
	.uni-list-cell__container{
		padding:32rpx 30rpx !important;
	}

    .kaoshi-user .iconfont {
        font-size: 22px;
    }

    .kaoshi-user-l {
        width: 20%;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

    .kaoshi-user-l .icon-weibiaoti {
        padding-left: 4px;
        font-size: 18px;
    }

    .kaoshi-user-m {
        flex: 1;
        text-align: center;
        font-size: 18px;
    }

    .kaoshi-user-right {
        display: flex;
        align-items: center;
        width: 66px;
        justify-content: flex-end;
    }

    .kaoshi-user-top-content {
        display: flex;
        width: 93%;
        margin: 0 auto;
        
        position: relative;
        height: 67px;
    }

    .kaoshi-user-top-content-image {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        margin-right: 12px;
    }

    .kaoshi-user-top-title {
        flex: 1;
        /* display: flex; */
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 18px;
		
    }
	.kaoshi-user-top-title image{
		
		
		width:80rpx;
		height:28rpx
	}
	.dw-vip-img{
		position:relative;
		top:-48rpx;
		left:280rpx;
	}
	.user-name{
		margin-top: 24rpx;
		width:300rpx;
		white-space:nowrap;
		word-break:keep-all;
		overflow:hidden;
		text-overflow:ellipsis;
		display: flex;
		flex-flow: row nowrap;
	}
	.vip-img{
		position: fixed;
		    top: 200px;
		    width: 100%;
		    z-index: 9;
	}
	.vip-img>view{
		margin:0 auto;
		margin-top:30rpx;
		background-color: #ffffff;
		margin-bottom: 0px;
	}
	.vip-img>view>image{
		height: 150rpx;width:100%
	}
	.phone{
		position: fixed;
		    
		    font-size: 20rpx;
		    color: #9c9c9c;
		    top: 160px;
		        left: 90px;
	}
</style>
